<template>
    <div>
      <div>
        <a-input-search style="width: 294px;margin:0 0 16px 0" placeholder="请输入要查询的名称" @change="onChange" />
        <a-button style="margin-left: 8px;">批量导入/导出</a-button>
        <a-button style="margin-left: 8px;">调整成员</a-button>
        <a-button style="margin-left: 8px;">调整排序</a-button>
        <a-button style="margin-left: 8px;">批量删除</a-button>
      </div>
  
      <div>
        <a-row style="background: #fff;">
          <a-col :span="4">
  
            <a-tree style="min-width: 170px;!important; " :expanded-keys="expandedKeys" :tree-data="gData"
              :auto-expand-parent="autoExpandParent" ref="nodeTree" :selectedKeys="selectedKeys"
              :replace-fields="replaceFields" default-expand-all show-icon @select="select" @expand="onExpand">
  
              <template slot="title" slot-scope="{ title }">
                <span v-if="title.indexOf(searchValue) > -1">
                  {{ title.substr(0, title.indexOf(searchValue)) }}
                  <span style="color: #f50">{{ searchValue }}</span>
                  {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                </span>
                <span v-else>{{ title }}</span>
              </template>
            </a-tree>
          </a-col>
          <a-col :span="20">
            <a-table :scroll="{ x: 'calc(700px + 50%)', y: 720 }" :row-selection="rowSelection" :columns="columns"
              :data-source="data" style="margin-top: 18px;" />
          </a-col>
        </a-row>
      </div>
    </div>
  </template>
  
  <script>
  
  
  
  import contacts from "@/api/organizations";
  export default {
  
  
    data() {
      return {
        log: "",
        replaceFields: { children: 'children', title: 'orgname', key: 'id' },
        expandedKeys: [],
        checkedKeys: ['0-0-0'],
        searchValue: '',
        autoExpandParent: true,
        gData: [],
        data: [],
        dataList: [],
        columns:
          [{
            title: '名字',
            dataIndex: 'displayName',
          },
          {
            title: '所属单位',
            dataIndex: 'department',
          },
          {
            title: '描述',
            dataIndex: 'description',
          },]
        ,
        selectedRowKeys: [], // Check here to configure the default column
  
      }
  
    },
    computed: {
      rowSelection() {
        const { selectedRowKeys } = this;
        return {
          selectedRowKeys,
          onChange: this.onSelectChange,
          hideDefaultSelections: true,
          selections: [
            {
              key: 'all-data',
              text: 'Select All Data',
              onSelect: () => {
                this.selectedRowKeys = [...Array(46).keys()]; // 0...45
              },
            },
            {
              key: 'odd',
              text: 'Select Odd Row',
              onSelect: changableRowKeys => {
                let newSelectedRowKeys = [];
                newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                  if (index % 2 !== 0) {
                    return false;
                  }
                  return true;
                });
                this.selectedRowKeys = newSelectedRowKeys;
              },
            },
            {
              key: 'even',
              text: 'Select Even Row',
              onSelect: changableRowKeys => {
                let newSelectedRowKeys = [];
                newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                  if (index % 2 !== 0) {
                    return true;
                  }
                  return false;
                });
                this.selectedRowKeys = newSelectedRowKeys;
              },
            },
          ],
          onSelection: this.onSelection,
        };
      },
    },
    mounted() {
      this.getTreeData()
    },
    methods: {
      select(e) {
        contacts.getUserList(e[0]).then(res => {
          this.data = res.data
        });
      },
      getParentKey(key, tree) {
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i];
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key;
            } else if (this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children);
            }
          }
        }
        return parentKey;
      },
      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i];
          const key = node.orgname;
          this.dataList.push({ key: node.id, title: key });
          if (node.children) {
            this.generateList(node.children);
          }
        }
      },
      getTreeData() {
        contacts.getOrganizations().then(res => {
          this.gData = res.data
          this.generateList(res.data)
          console.log(this.dataList)
        }, err => {
        })
  
      },
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
  
      },
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
  
      },
      onChange(e) {
        // const value = e.target.value;
        // console.log(value)
        // const expandedKeys = 1
        //     // this.dataList
        //     // .map(item => {
        //     //   if (item.title.indexOf(value) > -1) {
        //     //     return this.getParentKey(item.key, this.gData);
        //     //   }
        //     //   return null;
        //     // })
        //     // .filter((item, i, self) => item && self.indexOf(item) === i);
        // Object.assign(this, {
        //   expandedKeys,
        //   searchValue: value,
        //   autoExpandParent: true,
        // });
  
  
      },
  
    }
  }
  </script>
  
  <style lang="less" scoped>
  .ant-layout-header {
    background: #03212100 !important;
  }
  
  .vtl {
    .vtl-drag-disabled {
      background-color: #d0cfcf;
  
      &:hover {
        background-color: #d0cfcf;
      }
    }
  
    .vtl-disabled {
      background-color: #d0cfcf;
    }
  }
  </style>